<script setup lang="ts">
import {ref} from "vue"
import {BtnInfo,BtnEnum} from '../index.d'
interface btn{

}
const list:BtnInfo[] = [
    // {title:'审批节点',type:BtnEnum.APPROVAL,icon:'z-nail-fixed'},
    // {title:'填写节点',type:BtnEnum.WRITE,icon:'z-edit'},
    {title:'添加节点',type:BtnEnum.WRITE,icon:'z-edit'},
    {title:'添加子分支',type:BtnEnum.BRANCH,icon:'z-paper-plane'}
]   
const emit = defineEmits(["add"]);
const add = (item:BtnInfo)=>{
    emit("add",{type:item.type})
}
</script>
<template>
<div>
    <div v-for="i in list" class="flex flex-row action-list" @click="add(i)">
        <i class="z-icon" :class="i.icon" style=""></i>
        <div class="flex-1 ml-2">{{i.title}}</div>
    </div>
</div>
    
    <!-- <el-dialog
        width="40%"
        title="节点信息"
        :visible.sync="winVisible"
        :append-to-body="true">
        <el-form :model="dataForm" ref="dataForm" label-width="80px" :rules="rules">
            <el-form-item label="节点名称" prop="name" required>
                <el-input v-model="dataForm.name" />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="winVisible = false">取消</el-button>
            <el-button type="primary" @click="addBtn">确定</el-button>
        </span>
    </el-dialog> -->
</template>
<style lang="scss" scoped>
.action-list{
    font-weight: 400;
    cursor: pointer;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    line-height: 32px;
    color: #494f57;
}
.action-list:hover{
    font-weight: bold;
    background: #ebebf0; 
}
</style>